<template> 
  <div class="write-secret-info">
    <group class="none-bottom-border">
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            申請日期<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value date-pciker" :span="8">
            <datetime v-model="payForm.startDate"
            :start-date="datePickerConfig.startDateConfig.startDate"
            placeholder="请选择申请日期" :format="datePickerConfig.format"
            @on-change="dateChange('startDate')"
            ref="startDateDom"
            clear-text="请选择申请日期" class="datetime"></datetime>
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            收款單位<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text"  v-model="payForm.payCompany" maxlength="30" placeholder="请输入收款單位">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            申請支付金額<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text" disabled v-model="payMoneyCH"  maxlength="30" placeholder="人民幣大寫">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            <!-- 申請支付金額<span class="require-item">*</span> -->
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text" v-model="payForm.payMoney" maxlength="30"  placeholder="请输入申請支付金額">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            付款方式<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-type" :span="4">
            <label for="payModeCash" >
              <input type="checkbox" value="0" name="mode"
              v-model="payModeCash" @change="payModeChangeCash"/>
              現金
            </label>
          </flexbox-item>
          <flexbox-item class="value leave-type" :span="4">
            <label for="payModeNoCash">
              <input type="checkbox" value="1" name="mode"
              v-model="payModeNoCash" @change="payModeChangeNoCash"/>
              轉賬
            </label>
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item" v-show="payModeNoCash">
        <flexbox>
          <flexbox-item class="title" :span="4">
            開戶銀行<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text" maxlength="100" onkeyup="value=value.replace(/[^\u4e00-\u9fa5]/g,'');if(value.length>100) value=value.slice(0,100)" v-model="payForm.payBank" placeholder="请输入開戶銀行">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item" v-show="payModeNoCash">
        <flexbox>
          <flexbox-item class="title" :span="4">
            賬號<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value leave-minute" :span="8">
            <input type="text" maxlength="100" onkeyup="value=value.replace(/[^\u4E00-\u9FA5A-Za-z0-9]/g,'');if(value.length>100) value=value.slice(0,100)" v-model="payForm.payAccount" placeholder="请输入賬號">
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item">
        <flexbox>
          <flexbox-item class="title" :span="4">
            收款事由<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" :max="200" v-model="payForm.payReason" :placeholder="'收款事由'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item" v-if="changeApplyType === '修改申请原因'">
        <flexbox>
          <flexbox-item class="title" :span="4">
            修改申请原因<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" :max="200" v-model="editApplyReason" :placeholder="'请输入修改申请原因'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
      <cell-box class="cellbox-item" v-if="changeApplyType === '重新申请原因'">
        <flexbox>
          <flexbox-item class="title" :span="4">
            重新申请原因<span class="require-item">*</span>
          </flexbox-item>
          <flexbox-item class="value" :span="8">
            <x-textarea class="apply-reason" :max="200" v-model="reApplyReason" :placeholder="'请输入重新申请原因'"></x-textarea>
          </flexbox-item>
        </flexbox>
      </cell-box>
    </group>
  </div>
</template>

<script>
  import convert, { zh } from 'cardinal-number';
  import { Group, CellBox, Flexbox, FlexboxItem, XTextarea, Datetime } from 'vux';
  export default {
    name: 'AskLeaveInfo',
    data () {
      return {
        reApplyReasonShow: false,
        reApplyReason: '',      // 重新申請原因
        editApplyReason: '',    // 修改申請原因
        changeApplyType: '',

        datePickerConfig: {
          format: 'YYYY-MM-DD', // 日期格式
          startDateConfig: {
            startDate: '',
          }
        },

        payModeCash: '',
        payModeNoCash: '',       
        payForm: {
          startDate: '',  // 申请日期
          payCompany: '',     // 收款单位
          payMoney: '',       // 申请支付金额
          payMode: '',        // 付款方式
          payBank: '',        // 开户银行
          payAccount: '',    // 账号
          payReason: '',      // 收款事由
        },
        // payMoneyCH: convert(999)
      };
    },
    computed: {
      payMoneyCH: {
        get:function(){
          // console.log(this.payForm.payMoney);
          // console.log(convert(parseFloat(this.payForm.payMoney)));
          if(this.payForm.payMoney.indexOf('￥')===-1){
            this.payForm.payMoney = '￥' + this.payForm.payMoney
          }
          
          return convert(parseFloat(this.payForm.payMoney.slice(1)))
        },
        set:function(val) {
        }
      }
    },
    components: {
      Group,
      CellBox,
      Flexbox,
      FlexboxItem,
      XTextarea,
      Datetime
    },
    mounted () {
      // console.log(convert(88880.9)) // 玖万零玖元玖角
    },
    methods: {
      // 日期更改時的回調
      dateChange: function (dateType) {
        let startDate = this.formatDateToYYYYMMDD(this.startDate);
        if (startDate) {
          this.datePickerConfig.endDateConfig.startDate = startDate;
        }
      },
      formatDateToYYYYMMDD: function (date) {
        if (!date) return;
        return dateFormat(date, 'YYYY-MM-DD');
      },
      payModeChangeNoCash() {
        this.payModeNoCash = true
        this.payModeCash = false
      },
      payModeChangeCash() {
        this.payModeNoCash = false
        this.payModeCash = true
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import '../../assets/style/variable';
  .write-secret-info{
    .none-bottom-border{
      .annex-inner{
        display:flex;
        justify-content: space-between;
        align-items: center;
        .annex-inner-title{
          width:90%;
        }
        .annex-inner-img{
          width:10%;
          text-align: right;
        }
      }
    }  
  }
  .cellbox-item{
    padding: 0 15px;
    &:before{
      border-color: #e6e6e6;
    }
    .title{
      color: #666;
      font-size: getRem(28);
      padding: getRem(32) 0;
    }
    .value{
      font-size: getRem(28);
    }
    .date-pciker{
      padding: getRem(32) 0;
      a{
        display: inline;
        padding: 0;
        color: #ddd;
        &:before{
          content: none;
        }
      }
      .has-value{
        color: #333;
      }
      .separation-symbol{
        color: #666;
      }
    }
    .leave-minute{
      input{
        display: block;
        width: calc(100% - 15px);
        border: 0; 
        padding: getRem(32) 0;
        line-height: getRem(38);
        font-size: getRem(28);
        &::placeholder{
          color: #ddd;
        }
      }
    }
    .apply-reason{
      padding: getRem(32) 0;
    }
    .leave-type{
      padding: getRem(32) 0;
      label{
        display: block;
        line-height: getRem(42);
        padding: 0 getRem(10) getRem(10) getRem(50);
        position: relative;
      }
      .other-type{
        display: inline-block;
        width: calc(100% - #{getRem(120)});
        border: 0;
        font-size: getRem(28);
        line-height: getRem(50);
        border-radius: 0;
        padding: 0 getRem(10);
        border-bottom: .5px solid #ddd;
        &:disabled{
          background: #fff;
        }
      }
      .apply-radio{
        position: absolute;
        left: 0;
        top: getRem(3);
        display: inline-block;
        appearance: none;
        -webkit-appearance: none;
        width: getRem(36);
        height: getRem(36);
        background: url(../../assets/images/radio-default.png) no-repeat center center;
        background-size: getRem(36) getRem(36);
        &:checked{
          background-image: url(../../assets/images/radio-selected.png);
        }
      }
    }
    .select-images-list{
      margin-top: getRem(20);
    }
  }
  .vux-flexbox{
    align-items: flex-start;
  }
  .vux-x-textarea /deep/ .weui-textarea{
    height: getRem(100);
  }     
  .vux-flexbox-item.value.leave-type label{
    padding-left: 0px!important;
    padding-bottom:getRem(35);
  }
  input[type="checkbox"]{
    width: 19px;
    height: 19px;
    display: inline-block;
    text-align: center;
    vertical-align: middle; 
    line-height: 18px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 3px;
    position: relative;
  }
  input[type="checkbox"]::before{
    content: "";
    background: url(../../assets/images/unselect_icon@3x.png) no-repeat center;
    background-size: getRem(38) getRem(38);
    background-color: #fff;
    position: absolute;
    top: 0;left: 0;
    width: 100%;
    height: 100%;
    border: none!important;
    border-radius: 3px;
  }
  input[type="checkbox"]:checked::before{
    // content: "\2713";
    content: "";
    background-color: #fff;
    position: absolute;
    background: url(../../assets/images/selected_icon@3x.png) no-repeat center;
    background-size: getRem(42) getRem(42);
    top: -2px;left: -1px;
    width:100%;
    border: none!important;
    // border: 1px solid #e50232;
    // color:#e50232;
    font-size: 20px;
    font-weight: bold;
    width: 21px;
    height: 21px;
  }
  .input[type="checkbox"]:checked{
    border: none!important;
  }
  input:focus{
    outline: none!important;
  }
  .vux-flex-row{
    align-items: flex-start;
  }
  select {
    padding: 15.36px 0;
    color: #333;
    font-size: getRem(28);
    /*统一边框*/
    border: solid 1px #000;
    /*将默认的select选择框样式清除*/
    appearance:none;//这个样式就是清除他的下拉按钮的默认样式
    -moz-appearance:none;
    -webkit-appearance:none;
    /*替换选择框的最右侧显示小箭头图片*/
    background: url(../../assets/images/down-arrow.png) no-repeat right center transparent;
    background-size: getRem(28);
    /*为下拉小箭头留出一点位置，避免被文字覆盖*/
    // padding-right: 14px;
  }
  select:focus{
    outline: none!important;
  }
  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand { display: none; }
</style>